<template>
    <div>
        <canvas id="mycanvas" width="500" height="500"></canvas>
    </div>
</template>

<script>
export default {
    data() {
        return {

        };
    },
    methods: {
        fun() {
            const canvas = document.getElementById('mycanvas')
            const ctx = canvas.getContext('2d')
            // console.log(ctx);
            ctx.translate(250, 250)
            ctx.beginPath()
            for (let i = 0; i <= 60; i++) {
                let jiaodu = 6 * i
                let ratateAngle = (Math.PI / 180) * jiaodu
                ctx.restore()
                ctx.save()
                ctx.rotate(ratateAngle)
                ctx.beginPath()
                ctx.strokeStyle = '#999'
                ctx.moveTo(190, 0)
                ctx.lineTo(200, 0)
                ctx.stroke()
                ctx.closePath()
            }
            ctx.beginPath()
            for (let i = 0; i <= 12; i++) {

                let jiaodu = 30 * i
                let ratateAngle = (Math.PI / 180) * jiaodu
                ctx.restore()
                ctx.save()
                ctx.rotate(ratateAngle)
                ctx.beginPath()
                ctx.strokeStyle = '#333'
                ctx.moveTo(180, 0)
                ctx.lineTo(200, 0)
                ctx.stroke()
                ctx.closePath()
            }

            let times = new Date()
            let hh = new Date().getHours() > 12 ? new Date().getHours() - 12 : new Date().getHours()
            let mm = new Date().getMinutes()
            let ss = new Date().getSeconds()
            // console.log(hh, mm, ss);

            setInterval(() => {
                let times = new Date()
                let hh = new Date().getHours()
                let mm = new Date().getMinutes()
                let ss = new Date().getSeconds()
                // console.log(hh, mm, ss);

                // 清楚上一秒针
                ctx.beginPath()
                ctx.restore()
                ctx.save()
                ctx.rotate((Math.PI / 180) * (270 + (((ss - 1) * 360) / 60)))
                ctx.lineWidth = '5';
                ctx.strokeStyle = '#fff'
                ctx.moveTo(0, 0)
                ctx.lineTo(175, 0)
                ctx.stroke()


                // 清除分针
                ctx.beginPath()
                ctx.restore()
                ctx.save()
                ctx.rotate((Math.PI / 180) * (270 + (((mm - 1) * 360) / 60)))
                ctx.lineWidth = '8';
                ctx.strokeStyle = '#fff'
                ctx.moveTo(0, 0)
                ctx.lineTo(135, 0)
                ctx.stroke()

                // 清除时针
                ctx.beginPath()
                ctx.restore()
                ctx.save()
                ctx.rotate((Math.PI / 180) * (270 + (((hh - 1) * 360) / 12)))
                ctx.lineWidth = '11'
                ctx.moveTo(0, 0)
                ctx.lineTo(105, 0)
                ctx.strokeStyle = '#fff'
                ctx.stroke()
 
                // 时针
                ctx.beginPath()
                ctx.restore()
                ctx.save()
                ctx.rotate((Math.PI / 180) * (270 + ((hh * 360) / 12)))
                ctx.lineWidth = '9'
                ctx.moveTo(0, 0)
                ctx.lineTo(100, 0)
                ctx.strokeStyle = 'tomato'
                ctx.stroke()

                // 分针
                ctx.beginPath()
                ctx.restore()
                ctx.save()
                ctx.rotate((Math.PI / 180) * (270 + ((mm * 360) / 60)))
                ctx.lineWidth = '6';
                ctx.strokeStyle = 'gold'
                ctx.moveTo(0, 0)
                ctx.lineTo(130, 0)
                ctx.stroke()

                // 秒针
                ctx.beginPath()
                ctx.restore()
                ctx.save()
                ctx.rotate((Math.PI / 180) * (270 + ((ss * 360) / 60)))
                ctx.lineWidth = '3';
                ctx.strokeStyle = 'skyblue'
                ctx.moveTo(0, 0)
                ctx.lineTo(170, 0)
                ctx.stroke()

            }, 1000)
        }
    },
    mounted(){
        this.fun()
    },
    components: {
    },
}
</script>

<style scoped>
</style>
